<template>
	<div class="login w-100 h-100 p-6">
		<div class="logo text-center">
			<img class="w-50" src="../assets/logo.jpg" alt="my login image">
		</div>
		<!-- 输入框：手机号+获取验证码 type+placeholder+btnTitle+disabled+error-->
		<input-group
			class="mt-5 mb-5"
			v-model="phone"
			type="number"
			placeholder="手机号"
			:btnTitle="btnTitle"
			:disabled="disabled"
			:error="errors.phone"
			@btnClick="getVerifyCode"
		/>

		<!-- 输入框：验证码 -->
		<input-group
			class="mt-5 mb-5"
			v-model="verifyCode"
		  type="number"
			placeholder="验证码"
			:error="errors.code"
		/>

		<!-- 用户服务协议 -->
		<div class="login_des">
			<span class="text-grey">新用户登录即自动注册，表示已同意</span>
      <a class="text-blue">《用户服务协议》</a>
		</div>
	
		<!-- 登录按钮 -->
		<div class="login_btn">
			<button
				class="mt-5 w-100 pt-3 pb-3 bg-green text-white"
				:disabled="isClick"
				@click="handleLogin"
			>登录</button>
		</div>
	</div>
</template>

<script>
import InputGroup from '../components/InputGroup'
export default {
	name:'login',
	components: {
		InputGroup
	},
	data(){
		return {
			phone: '',
			btnTitle:'获取验证码',
			disabled: false,
			verifyCode: '',
			errors:{}
		}
	},
	computed:{
		// （disabled）能否点击（计算属性）
		isClick(){
			// 不存在手机号或验证码，禁用
			if (!this.phone || !this.verifyCode) return true
			else return false
		}
	},
	methods:{
		// 获取验证码（判断手机号是否准确，然后获取验证码（定时器））
		getVerifyCode(){
			// 判断是否有效手机号，validatePhone
			if(this.validatePhone()){
				// 按钮有效，开启定时器，validateBtn
				this.validateBtn();
				// 发起网络请求，发送验证码短信
				this.$axios
				 	.post('/api/posts/sms_send', {
						// tpl_id:"201513",
						key:"8a8640fe91683534b4a9214d0a0687fc",
						phone: this.phone
					})
					.then(res=>{
						console.log(res)
					})
			}
		},
		// 登录（axios请求）
		handleLogin(){
			this.errors = {}
			// 发送请求
			this.$axios
        .post("/api/posts/sms_back", {
          phone: this.phone,
          code: this.verifyCode
				})
				.then(res=>{
					console.log(res.data)
					// 检测成功，设置登录状态(将id存储到localStorage)并且跳转到/
					localStorage.setItem("ele_login",res.data.user._id)
					this.$router.push('/')
				})
				.catch(err=>{
					// 返回错误信息:(输入验证码的框显示错误信息 :error="errors.code")
					this.errors = {
						code: err.response.data.msg
					}
				})
		},
		// 判断手机号是否符合规格
		validatePhone(){
			// 验证手机号码
			// 手机号码不符合规格
			if(!this.phone){
				// errors是对象，有phone和code属性
				this.errors={
					phone:'手机号码不能为空'
				}
				return false//返回false
			} else {
				this.errors={}//错误为空
				return true//返回true
			}
		},
		// 有效按钮
		validateBtn(){
			// 思路：一个60秒的定时器，60秒时间内禁用，后面恢复使用，清除之前的定时器
			let time = 60 //初始时间为60s
			let timer = setInterval(()=>{ //定时器
				// 时间为0s
				if(time == 0) {
					// 清除之前的定时器+改文字+恢复使用
					clearInterval(timer)
					this.btnTitle = '获取验证码'
					this.disabled = false
 				} else {
					//	开启倒计时
					this.btnTitle = time+'秒后重试'
					this.disabled = true
					time-- //1s执行一次，time每次减1
				 }

			},1000) //1s执行一次
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/_variables.scss';

.input_group button[disabled] {
  color: map-get($colors,'green-1');
}
</style>
